/* 基本的抽屉按钮样式 */
.drawer-toggle {
    position: absolute;
    top: 50%;
    /* 垂直居中 */
    left: -30px;
    /* 将按钮放置在抽屉的左侧 */
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    width: 30px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 999;
    /* 确保按钮在最上层 */
    transition: transform 0.3s ease;
    transform: translateY(-50%);
    /* 垂直居中 */
    
    /* 内边距 */
    backdrop-filter: blur(10px);
    /* 设置背景模糊效果 */
    -webkit-backdrop-filter: blur(10px);
    /* 兼容 Safari */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    /* 给 div 添加阴影，增强立体感 */
}

/* 图标样式 */
.drawer-icon {
    width: 20px;
    /* 图标宽度 */
    height: 20px;
    /* 图标高度 */
    transition: transform 0.3s ease;
    /* 平滑旋转过渡 */
    color: white;
    /* 图标颜色为白色 */
    transform: rotate(90deg);
    /* 初始状态：旋转90度 */
    z-index: 999;
}

/* 抽屉面板 */
.drawer {
    position: absolute;
    top: 0;
    right: -300px;
    /* 初始位置在外面 */
    width: 300px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    transition: right 0.3s ease;
    z-index: 999;
    display: none;


    /* 内边距 */
    backdrop-filter: blur(10px);
    /* 设置背景模糊效果 */
    -webkit-backdrop-filter: blur(10px);
    /* 兼容 Safari */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    /* 给 div 添加阴影，增强立体感 */
}

/* 抽屉内容 */
.drawer-content {
    height: 100%;
}

/* 当抽屉被激活时，右移 */
.drawer.open {
    right: 0;
}

/* 点击时旋转图标 */
.drawer.open~.drawer-toggle .drawer-icon {
    transform: rotate(-90deg);
    /* 旋转-90度 */
}

.drawer-title {
    padding: 20px;
}

/* 图片列表 */
.image-gallery {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    overflow-y: scroll;
    /* js 动态设置  */
    gap: 15px;
}

/* 滚动条的宽度 */
.image-gallery::-webkit-scrollbar {
    width: 5px;
    /* 设置滚动条宽度 */
}

/* 滚动条轨道 */
.image-gallery::-webkit-scrollbar-track {
    background: #333;
    /* 轨道的颜色 */
    border-radius: 10px;
    /* 轨道的圆角 */
}

/* 滚动条的滑块（thumb） */
.image-gallery::-webkit-scrollbar-thumb {
    background: #ccc;
    /* 滚动条的颜色 */
    border-radius: 10px;
    /* 滚动条的圆角 */
}

/* 滚动条滑块在 hover 时的颜色 */
.image-gallery::-webkit-scrollbar-thumb:hover {
    background: #aaa;
    /* 滚动条滑块的 hover 状态 */
}

/* 图像容器 */
.captured-image-wrapper {
    position: absolute;
    top: 0px;
    width: 86%;
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
    transition: all 1s cubic-bezier(0.4, 0, 1, 1)
}

/* 每个图片的样式 */
.captured-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 5px;
    
    /* transform: scaleX(-1); */
}

/* 删除按钮样式 */
.delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 18px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.delete-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.new-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 5px;
    font-weight: bold;
    z-index: 1;
}